<template>
	<view class="reward" v-if="rewardStatus">
		<view class="rewardMain">
			<view class="flex alignCenter title justConBetween font16">
				<uni-icons class="closeIcon" type="closeempty" size="18" @click="close"></uni-icons>
				<view class="font14">设置赏金，能帮助你获得更快更好的回答哦！</view>
				<view class="colorMain" @click="sure">确定</view>
			</view>
			<view class="flex alignCenter justConBetween flexWrap money">
				<view class="" v-for="(item,index) in rewardArr" :key="index">
					<view :class="choose==index?'font16 bold moneyItem activeMoney':'font16 bold moneyItem'" @click="chooseClick(item,index)">
						{{item.title}}元
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"uni-reward",
		props:{
			rewardStatus:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				choose:null,
				rewardArr:[{
					title:'1',
					id:1
				},{
					title:'3',
					id:2
				},{
					title:'8',
					id:3
				},{
					title:'18',
					id:4
				},{
					title:'28',
					id:5
				},{
					title:'68',
					id:6
				},{
					title:'108',
					id:7
				},{
					title:'168',
					id:8
				}]
			};
		},
		methods:{
			// 关闭
			close(){
				this.$emit('closeReward')
			},
			// 确定
			sure(){
				if(!this.choose && this.choose!==0){
					uni.showToast({
						icon:'none',
						title:'请选择赏金！'
					})
					return
				}
				this.$emit('chooseRewardSucc',this.rewardArr[this.choose])
			},
			// 选择金额
			chooseClick(item,idx){
				this.choose=idx
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.reward{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .1);
	z-index:20
}
.rewardMain{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
	padding: 30rpx 30rpx 50rpx;
	box-sizing: border-box;
	background: #fff;
	border-radius: 40rpx 40rpx 0 0;
	.title{
		border-bottom: 1px solid $bordercolor;
		padding: 30rpx 0;
	}
	.closeIcon{
		color:$colorMain !important;
	}
}
.money{
	padding: 30rpx 0 0;
	&>view{
		flex: 0 0 25%;
		margin-bottom: 30rpx;
	}
	.moneyItem{
		background:$pageBgColor;//$colorMain;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 130rpx;
		margin:0 auto;
		position: relative;
	}
	.activeMoney{
		background: $colorMain;//$colorred;
	}
}
</style>